<template>
	<view class="power-box">
		<image class="bj-img" src="../../static/ai_power_bjimg.png" mode="widthFix"></image>
		<view class="power-content">
			<view class="top-header" :style="{paddingTop:topXp+'px'}">
				<view class="top-nav-box" >
					<view class="top-nav-box-left" :style="{height:headerHight+'px'}" @click="gotoBack">
						<u-icon name="arrow-left" color="#333" size="24"></u-icon>
					</view>
					<view class="top-nav-box-content" :style="{height:headerHight+'px',lineHeight:headerHight+'px'}" >
						能量
					</view>
				</view>
			</view>
			<view class="top-news-box">
				<view class="top-news-right">
					<view class="top-news-right-tip">
						<view class="top-news-right-tip-left">
							我的能量
						</view>
						<view class="top-news-right-tip-right" @click="gotopower">
							<u-icon name="question-circle" size="12" color="#376FFF"></u-icon>
							<view style="margin-left: 5px;margin-right: 2.5px;">规则说明</view>
							<u-icon name="arrow-right" size="12" color="#376FFF"></u-icon>
						</view>
					</view>
					<view class="power-num">
						{{userNews.point}}
					</view>
				</view>
				<image class="dianchi-img" src="../../static/ai_power_bj.png" mode="widthFix"></image>
			</view>
			<view class="bottom-content">
				<view class="huoqu-box">
					<view class="renwu-title">
						任务中心
					</view>
					<view class="renwu-list">
						<view class="renwu-list-left">
							<image class="renwu-list-img" src="../../static/power_icon_video@2x.png" mode=""></image>
							<view class="renwu-list-center">
								<view class="renwu-list-center-top">观看视频</view>
								<view class="renwu-list-center-bottom">观看视频赠送<view style="color:#376FFF;">{{video_rewards}}</view>能量</view>
							</view>
						</view>
						<view class="renwu-list-right">
							<view class="none-guankan-btn" @click="noneClick">去观看</view>
							<!-- <view class="guankan-btn">已观看</view> -->
						</view>
					</view>
					<view class="renwu-list">
						<view class="renwu-list-left">
							<image class="renwu-list-img" src="../../static/power_icon_sign@2x.png" mode=""></image>
							<view class="renwu-list-center">
								<view class="renwu-list-center-top">每日签到</view>
								<view class="renwu-list-center-bottom">每日签到赠送<view style="color:#376FFF;">{{everyday_sign}}</view>能量</view>
							</view>
						</view>
						<view class="renwu-list-right">
							<view class="none-guankan-btn" @click="qiandao" v-if="!is_sign">签到</view>
							<view class="guankan-btn" v-if="is_sign">已签到</view>
						</view>
					</view>
					<view class="renwu-list">
						<view class="renwu-list-left">
							<image class="renwu-list-img" src="../../static/power_icon_invite@2x.png" mode=""></image>
							<view class="renwu-list-center">
								<view class="renwu-list-center-top">邀请好友</view>
								<view class="renwu-list-center-bottom">邀请好友赠送<view style="color:#376FFF;">{{invite_friends}}</view>能量</view>
							</view>
						</view>
						<view class="renwu-list-right">
							<view class="none-guankan-btn" @click="noneClick">去邀请</view>
							<!-- <view class="guankan-btn">已观看</view> -->
						</view>
					</view>
				</view>
				<view class="power-history">
					<view class="renwu-title">
						能量记录
					</view>
					<view class="power-list" v-for="(item,index) in powerList" v-if="powerList.length > 0" :key="index">
						<view class="power-list-left">
							<view class="power-list-left-top">{{item.description}}</view>
							<view class="power-list-left-bottom">{{item.created_at}}</view>
						</view>
						<view class="power-list-right">
							<view class="power-list-num-add">{{item.point}}</view>
						</view>
					</view>
					<view class="power-list-none" v-if="powerList.length == 0">~暂无记录~</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script >
	import http from '../../api/api-index.js'
	import { mapState,mapGetters,mapMutations } from 'vuex'
	
	export default{
		data(){
			return{
				topXp:'',
				headerHight:'',
				user_id:'',
				powerList:[],
				page:1,
				everyday_sign:0,//每日签到
				invite_friends:0,//邀请好友
				video_rewards:0,//激励广告
			}
		},
		computed:{
			...mapState({
				'userNews':state => state.user.userNews
			}),
			...mapGetters([
				'is_sign'
			])
		},
		onLoad() {
			this.getTop()
			this.user_id = uni.getStorageSync('uid')
			this.getPowerList()
			this.getPowerFun()
		},
		onReachBottom(){
			this.page++
			this.getPowerList()
		},
		methods:{
			...mapMutations(['SET_USERNEWS']),
			getUserNewsFun(){
				if(!this.user_id){
					return false
				}
				http.getUserNews({
					user_id:this.user_id
				}).then((ress)=>{
					let userNewsess = ress.data.result
					userNewsess.phone = this.userNews.phone
					this.SET_USERNEWS(userNewsess)
				})
			},
			getPowerFun(){
				http.getUserPower().then((res)=>{
					console.log(res)
					if(res.data.code == 200){
						let data = res.data.result
						this.everyday_sign = data.everyday_sign
						this.invite_friends = data.invite_friends
						this.video_rewards = data.video_rewards
					}
				})
			},
			getTop(){
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				this.topXp =  menuButtonInfo.top
				this.headerHight = menuButtonInfo.height
			},
			gotoBack(){
				uni.navigateBack({
					delta:1
				})
			},
			qiandao(){
				http.getUserSign({
					user_id:this.user_id
				}).then((res)=>{
					if(res.data.code == 200){
						uni.showToast({
							title:res.data.msg
						})
						this.getUserNewsFun()
						
						//刷新记录列表
						this.powerList = []
						this.page = 1
						this.getPowerList()
					}
				})
			},
			gotopower(){
				uni.navigateTo({
					url:'/pages/xieyi/xieyi?name=能量说明'
				})
			},
			getPowerList(){
				http.getUserPointsList({
					user_id:this.user_id,
					limit:10,
					page:this.page
				}).then((res)=>{
					uni.hideLoading()
					if(res.data.code == 200){
						if(res.data.result.length > 0){
							this.powerList = this.powerList.concat(res.data.result)
						}else{
							if(this.page > 1){
								uni.showToast({
									title:"已是最新记录",
									icon:'none'
								})
							}
						}
					}else{
						
					}
				})
			},
			noneClick(){
				uni.showToast({
					title:'暂无该功能，尽情期待',
					icon:'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.power-box{
		width: 100%;
		min-height: 100vh;
		background: $bg-color;
		position: relative;
		.bj-img{
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			width: 100%;
		}
		.power-content{
			position: absolute;
			width: 100%;
			z-index: 2;
			.top-header{
				width: 100%;
				box-sizing: border-box;
				padding: 0 11px 11px 11px;
				.top-nav-box{
					width: 100%;
					display: flex;
					flex-direction: row;
					align-items: center;
					box-sizing: border-box;
					position: relative;
					.top-nav-box-left{
						display: flex;
					}
					.top-nav-box-content{
						width: calc(100% - 48px);
						text-align: center;
						font-size: 16px;
						color: #333;
					}
				}
			}
			.top-news-box{
				width: 100%;
				box-sizing: border-box;
				padding:0 20px;
				position: relative;
				top: 30px;
				left: 0;
				min-height: 108px;
				.top-news-right{
					.top-news-right-tip{
						width: 100%;
						display: flex;
						flex-direction: row;
						align-items: center;
						.top-news-right-tip-left{
							font-size: 14px;
							color: #666;
							margin-right: 16px;
						}
						.top-news-right-tip-right{
							display: flex;
							flex-direction: row;
							align-items: center;
							color: $main-color;
							font-size: 12px;
						}
					}
					.power-num{
						font-size: 32px;
						line-height: 45px;
						color: #333;
						margin-top: 10px;
					}
				}
				.dianchi-img{
					width: 77px;
					position: absolute;
					right: 11px;
					top: 0;
				}
			}
			.bottom-content{
				position: absolute;
				z-index: 3;
				width: 100%;
				.huoqu-box{
					width: calc(100% - 22px);
					background: #fff;
					border-radius: 20px;
					box-sizing: border-box;
					padding: 15px;
					margin-top: 20px;
					margin-left: 11px;
					.renwu-title{
						width: 100%;
						font-size: 17px;
						color: #333;
						margin-bottom: 20px;
					}
					.renwu-list{
						width: 100%;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 24px;
						.renwu-list-left{
							display: flex;
							flex-direction: row;
							.renwu-list-img{
								width: 48px;
								height: 48px;
								margin-right: 12px;
							}
							.renwu-list-center{
								line-height: 24px;
								.renwu-list-center-top{
									font-size: 14px;
								}
								.renwu-list-center-bottom{
									display: flex;
									flex-direction: row;
									align-items: center;
									font-size: 12px;
									color: #999;
								}
							}
						}
						.renwu-list-right{
							.guankan-btn{
								width: 70px;
								height: 30px;
								text-align: center;
								background: #ABABAB;
								text-align: center;
								color: #fff;
								border-radius: 7px;
								line-height: 30px;
								font-size: 14px;
							}
							.none-guankan-btn{
								width: 70px;
								height: 30px;
								line-height: 30px;
								text-align: center;
								background: $main-color;
								text-align: center;
								color: #fff;
								border-radius: 7px;
								font-size: 14px;
							}
						}
					}
					.renwu-list:last-child{
						margin-bottom: 0px;
					}
				}
				.power-history{
					width: calc(100% - 22px);
					margin-left: 11px;
					margin-top: 11px;
					background: #fff;
					border-radius: 20px;
					box-sizing: border-box;
					padding: 15px;
					.renwu-title{
						width: 100%;
						font-size: 17px;
						color: #333;
						margin-bottom: 20px;
					}
					.power-list{
						width: 100%;
						height: 70px;
						border-bottom: 1px solid #eee;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
						.power-list-left{
							.power-list-left-top{
								font-size: 14px;
								color: #333;
							}
							.power-list-left-bottom{
								font-size: 12px;
								color: #999;
								margin-top: 10px;
							}
						}
						.power-list-right{
							font-size: 14px;
							.power-list-num-add{
								color: $main-color;
							}
							.power-list-num-reduce{
								color: #333;
							}
						}
					}
					.power-list-none{
						width: 100%;
						height: 70px;
						text-align: center;
						line-height: 70px;
						color: #999;
					}
				}
			}
		}
	}
</style>